<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>d3-demos</title>
</head>
<script src="https://unpkg.com/d3@4.10.0"></script>
<script>
  console.log(d3);
</script>
<body>
  <div>
    <h3>d3-demos</h3>
    <p>p</p>

    <div class="box"></div>
    <canvas id="graph"></canvas>

    <ul id="my_ul">
      <li></li>
      <li></li>
      <li></li>
    </ul>

    <svg id="svg">
      <text x="10" y="10">Hello World!</text>
      <rect>
      </rect>
    </svg>

    <svg id="svg1" width="400" height="400">

    </svg>



  </div>



  <script>
    d3.select('p').text('Hello D3');

    d3.selectAll('.box')
      .style('background-color', 'red')
      .style('width', '150px')
      .style('height', '200px').text("I`m box render by D3").style('font-size','24px').style('color','#f0f20a');

    
    var dataSet = ['wwww','aaaa','www1'];
    d3.selectAll('#my_ul>li').data(dataSet).text(function(d,i){
      return d;
    });

var svg1 = d3.select("#svg")     //选择文档中的body元素

var dataset = [ 250 , 210 , 170 , 130 , 90 ]; 
var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)


var min = d3.min(dataset);
var max = d3.max(dataset);

var linear = d3.scaleLinear()
        .domain([min, max])
        .range([0, 250]);

svg1.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return linear(d);   //在这里用比例尺
         //return d; 返回对应的值
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");
    // .append('text').text(function(d){return d});

    // svg1.selectAll("rect text").attr("x",20).attr("y",rectHeight);





var circle1 = d3.select("#svg1").append("circle")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 45)
        .style("fill","green");

//在1秒（1000毫秒）内将圆心坐标由100变为300
circle1.transition()
    .duration(1000)
    .attr("cx", 300).transition().duration(2000).attr('cy',150).attr('r',60).transition().duration(1000).attr("cx",100).attr("cy", 100);
circle1.on('click',function(d,i){
  circle1.style("fill","red");
  alert(d);
})
  </script>
</body>
</html>